<section id="dates" class="section--settings section--collapsible">
	<div class="section__header">
		<h2>Dates & Times</h2>
	</div>

	<div class="section__collapsible">
		<div class="section__group">
			<div class="section__content">
				<div class="setting">
					<div class="setting__input">
						<input
							id="defaultDateStyle"
							name="defaultDateStyle"
							type="checkbox"
							value="relative"
							data-value-off="absolute"
							data-setting
						/>
						<label for="defaultDateStyle">Allow relative date formatting</label>
					</div>
					<span class="setting__hint hidden" data-visibility="defaultDateStyle =relative"
						>Shows some dates relatively, e.g. 1 day ago</span
					>
					<span class="setting__hint hidden" data-visibility="defaultDateStyle =absolute"
						>Shows dates absolutely, e.g.
						<span
							data-setting-preview="defaultDateFormat"
							data-setting-preview-type="date"
							data-setting-preview-default="MMMM Do, YYYY h:mma"
						></span>
					</span>
				</div>

				<div class="settings">
					<div class="setting">
						<div class="setting__input">
							<label for="defaultDateLocale">Date&nbsp;locale</label>
							<input
								id="defaultDateLocale"
								name="defaultDateLocale"
								type="text"
								placeholder="defaults to VS Code locale"
								data-setting
								data-setting-preview
							/>
							<a
								class="link__learn-more"
								title="See possible BCP 47 language tag for supported locale values"
								href="https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags"
							>
								<i class="icon icon__info"
									>Can use <code>system</code> to follow the system locale, or enter a locale language
									tag, e.g. en-US</i
								>
							</a>
						</div>
						<span class="setting__hint">
							<span style="line-height: 2rem">
								<i class="icon icon--sm icon__info"></i> Use <code>system</code> for the system locale,
								or a locale language tag, e.g. en-US
							</span>
							<br />
							Example date:
							<span
								data-setting-preview="defaultDateLocale"
								data-setting-preview-type="date-locale"
								data-setting-preview-default="defaultDateFormat"
							></span>
						</span>
					</div>

					<div class="setting">
						<div class="setting__input">
							<label for="defaultDateFormat">Date&nbsp;format</label>
							<input
								id="defaultDateFormat"
								name="defaultDateFormat"
								type="text"
								placeholder="defaults to MMMM Do, YYYY h:mma"
								data-setting
								data-setting-preview
							/>
							<a
								class="link__learn-more"
								title="See Moment.js docs for supported date formats"
								href="https://momentjs.com/docs/#/displaying/format/"
							>
								<i class="icon icon__info"></i>
							</a>
						</div>
						<span class="setting__hint"
							>Example date:
							<span
								data-setting-preview="defaultDateFormat"
								data-setting-preview-type="date"
								data-setting-preview-default="MMMM Do, YYYY h:mma"
							></span>
						</span>
					</div>

					<div class="setting">
						<div class="setting__input">
							<label for="defaultDateShortFormat">Short&nbsp;date&nbsp;format</label>
							<input
								id="defaultDateShortFormat"
								name="defaultDateShortFormat"
								type="text"
								placeholder="defaults to system short date format"
								data-setting
								data-setting-preview
							/>
							<a
								class="link__learn-more"
								title="See Moment.js docs for supported date formats"
								href="https://momentjs.com/docs/#/displaying/format/"
							>
								<i class="icon icon__info"></i>
							</a>
						</div>
						<span class="setting__hint"
							>Example short date:
							<span
								data-setting-preview="defaultDateShortFormat"
								data-setting-preview-type="date"
								data-setting-preview-default="short"
							></span>
						</span>
					</div>

					<div class="setting">
						<div class="setting__input">
							<label for="defaultTimeFormat">Time&nbsp;format</label>
							<input
								id="defaultTimeFormat"
								name="defaultTimeFormat"
								type="text"
								placeholder="defaults to h:mma"
								data-setting
								data-setting-preview
							/>
							<a
								class="link__learn-more"
								title="See Moment.js docs for supported date formats"
								href="https://momentjs.com/docs/#/displaying/format/"
							>
								<i class="icon icon__info"></i>
							</a>
						</div>
						<span class="setting__hint"
							>Example time:
							<span
								data-setting-preview="defaultTimeFormat"
								data-setting-preview-type="date"
								data-setting-preview-default="h:mma"
							></span>
						</span>
					</div>
				</div>
			</div>
		</div>

		<div class="section__group">
			<p class="section__hint">
				<i class="icon icon__info"></i> For more options, open
				<a
					class="command"
					title="Open Settings"
					href="command:workbench.action.openSettings?%22gitlens.default%22"
					>Settings</a
				>
				and search for <b><i>gitlens.default</i></b>
			</p>
		</div>
	</div>
</section>
